import Vue from 'vue'
//增加loading动画
Vue.directive('busy', {
    update: function(el, binding) {
        let p = binding.value
        if(el._isloading) return
        if(p && p.then){
            el._isLoading = true
            let timer = setTimeout(function () {
                el._isLoading = false
                el.removeChild(loading)
            },10000)
            let loading = document.createElement('div')
            loading.innerHTML=`<div style="position: fixed;height: 100%;width:100%;top:0;left:0;background-color: rgba(254,254,254,.5)">loading</div>`
            el.appendChild(loading)
            p.then(function () {
                el._isLoading = false
                el.removeChild(loading)
                clearTimeout(timer)
            },function(error){
                el._isLoading = false
                el.removeChild(loading)
                clearTimeout(timer)
            })
        }
    }

})
Vue.directive('imgZoom', {
    update: function(el, binding) {
        let arr = el.querySelectorAll('img');
        for(let i = 0;i<arr.length;i++){
            arr[i].addEventListener('click',function () {
                // console.log(arr[i].src);
                let imgZoom = document.createElement('div')
                imgZoom.innerHTML=`<div style="zoom:normal;padding-top:50%;position: fixed;height: 100%;width:100%;top:0;left:0;background-color: rgba(254,254,254,.5)" id="img-zoom">
                        <img src="`+arr[i].src+`" alt="" style="max-width: 100%;max-height: 100%;transform: translateY(-55%)">
                        </div>`
                document.body.appendChild(imgZoom)
                imgZoom.addEventListener('click',function () {
                    document.body.removeChild(imgZoom)
                })
            })
        }
    }

})
Vue.directive('focusBottom', {
    bind: function(el, binding) {
        el.addEventListener('focus',function () {
            let bottom = document.getElementById('index-bottom')
            if(bottom) bottom.style.marginBottom = '-100px'
        })

        el.addEventListener('blur',function () {
            let bottom = document.getElementById('index-bottom')
            if(bottom) bottom.style.marginBottom = '0'
        })
    }

})

Vue.directive('title', function(el, binding) {
    if(typeof document != "undefined") document.title = binding.value
})
function bindMescroll(evt){
        //if the content is actually scrollable, i.e. the content is long enough
        //that scrolling can occur
        if(el.offsetHeight < el.scrollHeight)
            alert(2)
            evt._isScroller = true
}
Vue.directive('mescroll', {
    bind: function(el, binding,vnode) {
        let option = binding.value
        let vm = vnode.context
        // console.log('1st:'+option.size);
        setTimeout(function () {
            vm.mescroll = new scroll("mescroll", {
                up: {
                    callback: vm[option.up],
                    page:{size:option.size,num:option.num},
                    isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                },
                down: {
                    callback: callback, //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
                }
            });
        },50)
        function callback(){
            vm.mescroll.endSuccess();
        }
        let overscroll = function(el) {
            el.addEventListener('touchstart', function() {
                let top = el.scrollTop
                    , totalScroll = el.scrollHeight
                    , currentScroll = top + el.offsetHeight
                if(top === 0) {
                    el.scrollTop = 1
                } else if(currentScroll === totalScroll) {
                    el.scrollTop = top - 1
                }
            })
            el.addEventListener('touchmove', function(evt) {
                //if the content is actually scrollable, i.e. the content is long enough
                //that scrolling can occur
                if(el.offsetHeight < el.scrollHeight)
                    evt._isScroller = true
            })
        }
        overscroll(el);
        document.body.addEventListener('touchmove',bindMescroll,false)
    },
    unbind(){
        // console.log(2);
        document.body.removeEventListener('touchmove',bindMescroll,false)
    }
})
import InfiniteScroll from '../assets/js/infinite';
Vue.directive('InfiniteScroll', InfiniteScroll);

